<template>
    <div class="content-comp">
        <div class="left-menu">
            <slot name="left"></slot>
        </div>
        <div class="center-content" v-if="showCenter">
            <slot name="center"></slot>
        </div>
        <div class="right-content">
            <slot name="right"></slot>
        </div>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "contentComp",
        props:{
            showCenter:false,//默认不显示两栏
        }
    }
</script>

<style lang="stylus" scoped>
.content-comp{
   /* margin-top: 16px;*/
    background: white;
    border-radius: 4px;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    height:100%
    position: relative
    .title{
        display flex
        justify-content space-between
        align-items center
        margin-bottom: 14px;
        background-color white
        position: sticky
        padding-bottom  10px
        height auto;
        top:0
        z-index 2
        [class^='el-icon-']{
            font-size 20px
            font-weight bolder
            cursor pointer
        }
        .text{
            font-size 16px
            font-weight bolder
        }
    }
    .left-menu,  .center-content{
        border-right: 2px solid #efefef;
        padding-right: 12px;
        display flex
        flex-direction column
        flex-shrink 0
        overflow auto
        height 100%
    }
    .left-menu{
        width: 280px;
    }
    .center-content{
        width: 220px;
        padding-left: 20px;
    }
    .right-content{
        width 100%
        padding-left 30px
        overflow auto
        height 100%
    }
}
</style>

